<html>
	<head>
		<script src="Three.js"></script>
		<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
		<script src="common.js"></script>
		<script src="map.js"></script>
		<script>
			$ = function(id){document.getElementById(id);};
			var camera,  renderer, mesh, scene;


			function init() {

				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.z = 1000;
				scene.add( camera );

				var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );

				scene.add( new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } ) ) );
				scene.add( new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshBasicMaterial( { color: 0x00FF00, wireframe: false } ) ) );
				scene.add( new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200 ), new THREE.MeshBasicMaterial( { color: 0x0000FF, wireframe: false } ) ) );


				renderer = new THREE.CanvasRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );

				document.body.appendChild( renderer.domElement );

			}

			function animate() {

				// note: three.js includes requestAnimationFrame shim
				requestAnimationFrame( animate );
				render();

			}

			function render() {

				//camera.rotation.x += 0.01;
				//camera.rotation.y += 0.02;

				renderer.render( scene, camera );

			}
			
			window.onload = function(){
				var	minimap=Raphael($("minimap"),210,210);
				var map = createMap(21, 21);
				drawMap(map, minimap);
			
				init();
				animate();
			};
		</script>
	</head>
	
	<body>
		<div id="minimap"></div> 
	</body>
</html>